<template>
  <div class="Finance-swiper">
    <!-- 面包屑 -->
    <Brem />
    <!-- 搜索 -->
    <Search @searchParent="searchParent" @resetParentFun="getData" />
    <!-- 表格 -->
    <WaterList :arr="arr" @resetParentFun="getData" />
    <!-- 分页 -->
    <pageCom :total="total" :pageSize="pageSize" />
  </div>
</template>

<script>
import Brem from "./components/Brem.vue";
import Search from "./components/Search.vue";
import WaterList from "./components/WaterList.vue";
import PageCom from "./components/PageCom.vue";
import { getFinance } from "../../api/finance";
export default {
  components: {
    Brem,
    Search,
    WaterList,
    PageCom
  },
  data() {
    return {
      arr: [],
      search: "",
      page: 1,
      pageSize: 20,
      total: 0
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    searchParent(val) {
      this.search = val;
      this.getData();
    },
    getData() {
      const params = {
        search: this.search,
        page: this.page, //页码
        pageSize: this.pageSize //每页条数
      };
      getFinance(params)
        .then(res => {
          // console.log(res);
          if (res.code == 200) {
            this.arr = res.data;
            this.total = res.total;
            // console.log("刷新了");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.Finance-swiper {
  padding-bottom: 20px;
  height: calc(100% - 80px) !important;
  // text-align: left;
}
</style>